<template>
    <div style="text-align: center;" >
        <div>
            <label style="margin-right: 10px">菜单名称：</label>
            <el-input
                 placeholder="请填写菜单名称"
                 style="width: 14%"
                 clearable
                 @clear=""
                 @keyup.enter.native=""/>

            <el-button type="primary"
                       @click="">
                查询
            </el-button>

            <el-button type="warning"
                       style="margin-right: 1px"
                       @click="">
                新增菜单
            </el-button>

        </div>
        <el-table :data="tableData">
            <el-table-column prop="name" label="菜单名称" width="140">
            </el-table-column>
            <el-table-column prop="image"
                             label="图片">
                <template slot-scope="{ row }">
                    <el-image style="width: 80px; height: 40px; border: none; cursor: pointer"
                              :src="row.image">
                        <div slot="error"
                             class="image-slot">
                            <img src="./../../assets/noImg.png"
                                 style="width: auto; height: 40px; border: none">
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="blueBug" @click="addSetMeal(scope.row)">
                        修改
                    </el-button>
                    <el-button type="danger" size="small" class="delBut" @click="deleteHandle('单删', scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        <Empty v-else-->
<!--               :is-search="isSearch"/>-->
<!--        <el-pagination v-if="counts > 10"-->
<!--                       class="pageList"-->
<!--                       :page-sizes="[10, 20, 30, 40]"-->
<!--                       :page-size="pageSize"-->
<!--                       layout="total, sizes, prev, pager, next, jumper"-->
<!--                       :total="counts"-->
<!--                       @size-change="handleSizeChange"-->
<!--                       @current-change="handleCurrentChange"/>-->
    </div>
</template>

<script>
export default {
    name: "First",
    data() {
        const item = {
            name: '王小虎',
            image: 'https://img2.baidu.com/it/u=3369130612,2858330241&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            // 自己写的时候改数据从后端获取
            tableData: Array(20).fill(item)
        }
    }
}
</script>

<style scoped>

</style>